import React from 'react';
import { connect } from 'dva';
import {InputItem} from 'antd-mobile';
import styles from './screen.css';
import cutStr from '../../../framework/utils/cutStr';

import topArrow from './imgs/top-arrow.png';
import bottomArrow from './imgs/bottom-arrow.png';
import selectTopArrow from './imgs/select-top-arrow.png';
import selectBottomArrow from './imgs/select-bottom-arrow.png';
// import writeIcon from '../../../../../../icons/personal/write-icon.png';
// const searchImg = require('../../../../../../icons/search.png')

const Screen = ({
  hiddenArr = [],
  ordeyIndex,
  areaIndex,
  typeNameIndex,
  selectIndex,
  isShow,
  ordey,
  areasArr,
  typeArr = [],
  onClickF=()=>{},
  onSelect=()=>{},
  onSelectClose=()=>{},
}) => {

  let ordeyArrow = ''
  // let ordeySelectArrow = ''
  let areaArrow = ''
  // let areaSelectArrow = ''
  let typeNameArrow = ''
  // let typeNameSelectArrow = ''
  if (selectIndex==1) {
    if (isShow==-1) {
      ordeyArrow = topArrow;
      areaArrow = topArrow;
      typeNameArrow = topArrow;
    } else if (isShow==1) {
      ordeyArrow = bottomArrow;
      areaArrow = topArrow;
      typeNameArrow = topArrow;
    } else if(isShow==2) {
      ordeyArrow = topArrow;
      areaArrow = bottomArrow;
      typeNameArrow = topArrow;
    } else if(isShow==3) {
      ordeyArrow = topArrow;
      areaArrow = topArrow;
      typeNameArrow = bottomArrow;
    }
  } else if (selectIndex==2) {
    if (isShow==-1) {
      ordeyArrow = topArrow;
      areaArrow = topArrow;
      typeNameArrow = topArrow;
    } else if (isShow==1) {
      ordeyArrow = bottomArrow;
      areaArrow = topArrow;
      typeNameArrow = topArrow;
    } else if(isShow==2) {
      ordeyArrow = topArrow;
      areaArrow = bottomArrow;
      typeNameArrow = topArrow;
    } else if(isShow==3) {
      ordeyArrow = topArrow;
      areaArrow = topArrow;
      typeNameArrow = bottomArrow;
    }
  } else if (selectIndex==3) {
      if (isShow==-1) {
        ordeyArrow = topArrow;
        areaArrow = topArrow;
        typeNameArrow = topArrow;
      } else if (isShow==1) {
        ordeyArrow = bottomArrow;
        areaArrow = topArrow;
        typeNameArrow = topArrow;
      } else if(isShow==2) {
        ordeyArrow = topArrow;
        areaArrow = bottomArrow;
        typeNameArrow = topArrow;
      } else if(isShow==3) {
        ordeyArrow = topArrow;
        areaArrow = topArrow;
        typeNameArrow = bottomArrow;
      }
    }

    //下拉框 style
    const screenHiddenStyle = (data, isShow) =>{
      let screenHidden = [`${styles.screenHidden}`]
      if(data && data.length > 8){
        screenHidden.push(`${styles.screenHiddenBottom}`)
      }
      return screenHidden.join(' ')
    }

  return(

    <div style={{width:'100%'}}>

      <div className={styles.screen}>
        {ordey ? (
          <div className={styles.screenItem} onClick={()=>onClickF('1')}>
            {cutStr.cutString(ordey[ordeyIndex].name, 8)}
            <img src={ordeyArrow}/>
          </div>
        ):''}
         {areasArr ? (
           <div className={styles.screenItem}  onClick={()=>onClickF('2')}>
             {cutStr.cutString(areasArr[areaIndex].name, 8)}
             <img src={areaArrow}/>
           </div>
         ):''}
         {typeArr ? (
           <div className={styles.screenItem} onClick={()=>onClickF('3')}>
             {cutStr.cutString(typeArr[typeNameIndex].name, 8)}
             <img src={typeNameArrow}/>
           </div>
         ):''}
       </div>
      {isShow==1?(
        <div>
          <div className={screenHiddenStyle(ordey,isShow)}>
            {ordey.map((item,index) => {
                let hiddenItem = [`${styles.hiddenItem}`];
                if(ordeyIndex == index){
                  hiddenItem.length = 0;
                  hiddenItem.push(`${styles.selectHiddenItem}`)
                }
                return (
                  <div key={index} className={hiddenItem.join('')} onClick={()=>onSelect('1',index,item)}>
                    <div>{item.name}</div>
                  </div>
                )
              })
            }
          </div>
          <div className={styles.selectBG} onClick={()=> onSelectClose()}></div>
        </div>
      ):''}
      {isShow==2?(
        <div>
          <div className={screenHiddenStyle(areasArr,isShow)}>
            {areasArr.map((item,index) => {
                let hiddenItem = [`${styles.hiddenItem}`];
                if(areaIndex == index){
                  hiddenItem.length = 0;
                  hiddenItem.push(`${styles.selectHiddenItem}`)
                }
                return (
                  <div key={index} className={hiddenItem.join('')} onClick={()=>onSelect('2',index,item)}>
                    <div>{item.name}</div>
                  </div>
                )
              })
            }
          </div>
          <div className={styles.selectBG} onClick={()=> onSelectClose()}></div>
        </div>
      ):''}

      {isShow==3?(
        <div>
          <div className={screenHiddenStyle(typeArr,isShow)}>
            {typeArr.map((item,index) => {
                let hiddenItem = [`${styles.hiddenItem}`];
                if(typeNameIndex == index){
                  hiddenItem.length = 0;
                  hiddenItem.push(`${styles.selectHiddenItem}`)
                }
                return (
                  <div key={index} className={hiddenItem.join('')} onClick={()=>onSelect('3',index,item)}>
                    <div>{item.name}</div>
                  </div>
                )
              })
            }
          </div>
          <div className={styles.selectBG} onClick={()=> onSelectClose()}></div>
        </div>
      ):''}

    </div>
  )
}

export default Screen;
